<template>
    <div style="margin-top: -55px">
        <el-container class="main">
            <el-aside :width="tabWidth+'px'">
                <div>
                    <div class="isClossTab" @click="isClossTabFun">
                        <i class="isCollapse?'el-icon-d-arrow-right':'el-icon-d-arrow-left'" ></i>
                    </div>
                    <el-menu :class="'menu'" default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                             :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-user-solid"></i>
                                <span>我的</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">账户信息</el-menu-item>
                                <el-menu-item index="1-4">登录日志</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-s-goods"></i>
                                <span>商品</span>
                            </template>
                            <el-menu-item-group>
                                    <el-menu-item index="2-1">商品列表</el-menu-item>
                                    <el-menu-item index="2-2">商品审核</el-menu-item>
                                    <el-menu-item index="2-3">商品回收站</el-menu-item>
                                    <el-menu-item index="2-4">商品评价</el-menu-item>
                                    <el-menu-item index="2-5">商品分类</el-menu-item>
                                <el-submenu index="2-7">
                                    <template slot="title">品牌管理</template>
                                    <el-menu-item index="2-7-1">品牌管理</el-menu-item>
                                    <el-menu-item index="2-7-2">添加新品牌</el-menu-item>
                                </el-submenu>
                                <el-submenu index="2-8">
                                    <template slot="title">图片管理</template>
                                    <el-menu-item index="2-8-1">图片列表</el-menu-item>
                                    <el-menu-item index="2-8-2">添加图片</el-menu-item>
                                </el-submenu>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-s-order"></i>
                                <span>订单</span>
                            </template>
                            <el-menu-item-group>
                                <el-submenu index="3-1">
                                    <template slot="title">订单列表</template>
                                    <el-menu-item index="3-1-1">订单列表</el-menu-item>
                                    <el-menu-item index="3-1-2"></el-menu-item>
                                    <el-menu-item index="3-1-3">订单详情-待付款</el-menu-item>
                                    <el-menu-item index="3-1-4">订单详情-待发货</el-menu-item>
                                    <el-menu-item index="3-1-5">订单详情-已发货</el-menu-item>
                                    <el-menu-item index="3-1-6">订单详情-已完成</el-menu-item>
                                    <el-menu-item index="3-1-7">订单详情-已关闭</el-menu-item>
                                    <el-menu-item index="3-1-8">取消订单</el-menu-item>
                                    <el-menu-item index="3-1-9">批量发货</el-menu-item>
                                </el-submenu>
                            </el-menu-item-group>
                                    <el-menu-item index="3-2">退货申请</el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                            <i class="el-icon-shopping-cart-full"></i>
                            <span>库存</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="4-1">商品入库</el-menu-item>
                                <el-menu-item index="4-1">商品出库</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-user"></i>
                                <span>用户</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="5-1">用户列表</el-menu-item>
                                <el-menu-item index="5-2">会员</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="6">
                            <template slot="title">
                                <i class="el-icon-toilet-paper"></i>
                                <span>促销</span>
                            </template>
                            <el-menu-item-group>
                                <el-submenu index="6-1">
                                    <template slot="title">秒杀活动</template>
                                    <el-menu-item index="6-1-1">秒杀活动列表</el-menu-item>
                                    <el-menu-item index="6-1-2">秒杀时间段列表</el-menu-item>
                                    <el-menu-item index="6-1-3">商品列表</el-menu-item>
                                    <el-menu-item index="6-1-4">提示通知</el-menu-item>
                                </el-submenu>
                                <el-menu-item index="6-2">优惠券</el-menu-item>
                                <el-menu-item index="6-3">首页推荐</el-menu-item>
                                <el-menu-item index="6-4">广告</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="7">
                            <template slot="title">
                                <i class="el-icon-edit-outline"></i>
                                <span>统计</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="7-1">交易统计</el-menu-item>
                                <el-menu-item index="7-2">商品统计</el-menu-item>
                                <el-menu-item index="7-3">搜索统计</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="8">
                            <template slot="title">
                                <i class="el-icon-open"></i>
                                <span>权限</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="8-1">部门管理</el-menu-item>
                                <el-menu-item index="8-2">成员管理</el-menu-item>
                                <el-menu-item index="8-3">添加成员</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </div>
            </el-aside>
            <el-container>
                <el-header class="main-header">
                    <el-dropdown>
                            <el-avatar src="https://img0.baidu.com/it/u=823471369,1688024072&fm=26&fmt=auto&gp=0.jpg" style="width: 60px;height: 60px;"></el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-button @click="logout">退出登录</el-button>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span style="color: white;font-size: 30px;">畅购后台管理</span>
                </el-header>
                <el-main>
                    <div>
                        <router-view></router-view>
                    </div>
                </el-main>
                <el-footer class="main-footer" height="50px">
                    <p>@畅购有限公司</p>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
  name: 'Main',
  data () {
    return {
      src: 'https://img0.baidu.com/it/u=823471369,1688024072&fm=26&fmt=auto&gp=0.jpg',
      isCollapse: false,
      tabWidth: 200,
      test1: 1,
      intelval: null
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },

    isClossTabFun () {
      clearInterval(this.intelval)
      if (!this.isCollapse) {
        this.intelval = setInterval(() => {
          if (this.tabWidth <= 64) { clearInterval(this.intelval) }
          this.tabWidth -= 1
        }, 1)
      } else {
        this.tabWidth = 200
      }
      this.isCollapse = !this.isCollapse
    },
    logout () {
      this.$router.replace('/')
      sessionStorage.clear()
      localStorage.clear()
      this.$notify({
        title: '成功退出',
        message: '',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>
    .main {
        height: 100vh;
        min-width: 800px;
        min-height: 600px;
        overflow: hidden;
    }
    aside {
        overflow: visible;
        height: 100%;
        background-color: #545c64;
        color:  #FFF;
    }
    .isClossTab{
        width: 100%;
        height: 60px;
        cursor: pointer;
        font-size: 25px;
        text-align: center;
        line-height: 60px;
        font-weight: bold;
        border-right: 1px solid #807c7c;
        box-sizing: border-box;
    }
    .menu {
        width: 100%;
        border-right:0;
    }
    .main-header {
        background-color: #545c64;
        color: #FFF;
    }
    .el-dropdown{
        cursor: pointer;
        float: right;
    }
    .el-dropdown-link{}

    img{
        /*$imgMargin: (($header-height - 50)/2);*/
        display:inline-block;
        width:50px;
        height: 50px;
        border-radius: 25px;
        background-color: #FFF;
        /*margin-top: $imgMargin;*/
    }
    .crumbs {
        margin-bottom: 20px;
    }

    .main-footer{
        text-align: center;
        background-color: white;
        color: black;
        line-height: 50px;
    }
</style>
